<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="rapid" uri="http://www.rapid-framework.org.cn/rapid" %>

<rapid:override name="breadcrumb">
    <%--面包屑导航 start--%>
    <nav class="breadcrumb">
        <a class="crumbs" href="/">
            <i class="fa fa-home"></i>首页
        </a>
        <i class="fa fa-angle-right"></i>
        <a href="/category/${category.categoryId}">${category.categoryName}</a>
        <i class="fa fa-angle-right"></i>
        正文
    </nav>
    <%--面包屑导航 end--%>
</rapid:override>

<rapid:override name="left">
    <%--博客主体-左侧文章正文 start--%>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <article class="post" >
                <header class="entry-header">
                    <h1 class="entry-title">
                            ${post.title}
                    </h1>
                </header><!-- .entry-header -->
                <div class="entry-content">
                    <c:if test="${pageInfo.pageNum==1}">
                        <div class="single-content" style="min-height:300px">
                            <hr>
                            <div id="floor-header" style="min-height:30px">
                                <a href="javascript:void(0);" onclick="interest(${post.postUserId})">${post.user.nickname}</a>
                                &nbsp;&nbsp;&nbsp;
                                <em><fmt:formatDate value="${post.createTime}" pattern="yyyy年MM月dd日 hh:mm"/></em>
                                <div style="float:right">1楼</div>
                            </div>
                            <hr>
                                ${post.postContent}
                        </div>
                    </c:if>
                    <c:if test="${pageInfo.total>0}">
                        <c:forEach items="${pageInfo.list}" var="floor" varStatus="s">
                            <div class="single-content" style="min-height:300px">
                                <hr>
                                <div id="floor-header" style="min-height:30px">
                                    <a href="javascript:void(0);" onclick="interest(${floor.commentUserId})">${floor.commentAuthorName}</a>
                                    &nbsp;&nbsp;&nbsp;
                                    <em><fmt:formatDate value="${floor.commentCreateTime}" pattern="yyyy年MM月dd日 HH:mm"/></em>
                                    <div style="float:right">${(pageInfo.pageNum-1)*pageInfo.pageSize+s.index+2}楼</div>
                                    <a href="#comments" onclick="replyComment(${(pageInfo.pageNum-1)*pageInfo.pageSize+s.index+2},${floor.commentId})" style="float:right; padding-right:20px;"> 回复 </a>
                                </div>
                                <hr>
                                <c:if test="${floor.commentPid>0}">
                                    <site style="font-size:12px;color:#999">回复&nbsp;${floor.parentComment.commentAuthorName}&nbsp;:&nbsp;${fn:substring(floor.parentComment.commentContent, 0, 30)}</site>
                                    <hr>
                                </c:if>
                                    ${floor.commentContent}
                            </div>
                        </c:forEach>
                    </c:if>
                    <br><br>

                    <footer class="single-footer">
                        <ul class="single-meta">
                            <li class="port-like">
                                <c:choose>
                                    <c:when test="${!like}">
                                        <a href="javascript:void(0)" title="点赞" onclick="like(${post.postId})">
                                            <i class="fa fa-thumbs-up" style="line-height: 26px;"></i>
                                        </a>
                                    </c:when>
                                    <c:otherwise>
                                        <a href="javascript:void(0)" title="已点赞">
                                            <i class="fa fa-thumbs-up" style="color:#ff6e6e;line-height: 26px;"></i>
                                        </a>
                                    </c:otherwise>
                                </c:choose>
                            </li>
                            <li class="r-hide">
                                <a href="javascript:pr()" title="侧边栏">
                                    <i class="fa fa-caret-left"></i>
                                    <i class="fa fa-caret-right"></i>
                                </a>
                            </li>
                        </ul>
                        <ul id="fontsize">
                            <li>A+</li>
                        </ul>
                    </footer><!-- .entry-footer -->
                    <hr>
                    <%@ include file="../Public/part/paging.jsp" %>
                    <div class="clear"></div>
                </div><!-- .entry-content -->
            </article><!-- #post -->
                <%--回复--%>
            <div id="comments" class="comments-area">
                <div id="respond" class="comment-respond">
                    <h3 id="reply-title" class="comment-reply-title"><span id="reply-title-word">发表回复</span>
                        <c:choose>
                        <c:when test="${sessionScope.user==null}">
                        <span style="color:red" >请登陆后回复<a href="/user/loginView" target="_blank">前往登录</a></span>
                    </h3>
                    </c:when>
                    <c:otherwise>
                        </h3>
                        <form id="comment_form" method="post" action="/comment/replySubmit">
                            <p class="comment-form-comment">
                            <p id="reply-comment" style="display:none">
                                <input id="comment" name="commentFloor" value="" disabled="disabled" style="width:50%">
                                <a href="javascript:void(0)" onclick="unReply()" style="margin-left:-35px;font-size:20px">x</a>
                            </p>
                            <textarea id="comment" name="commentContent" rows="6" required style="resize: none;"></textarea>
                            </p>
                            <div class="clear"></div>
                            <p class="form-submit">
                                <input type="hidden" name="commentPid" value="">
                                <input type="hidden" name="commentPostId" value="${post.postId}" id="post_id">
                                <input id="submit" name="submit" type="submit" value="回复">
                            </p>
                        </form>
                    </c:otherwise>
                    </c:choose>
                </div>
            </div>
                <%--回复end--%>
        </main>
        <!-- .site-main -->
    </div>
    <%--博客主体-左侧文章正文end--%>
</rapid:override>
<%--侧边栏 start--%>
<rapid:override name="right">
    <%@include file="../Public/part/sidebar-1.jsp" %>
</rapid:override>
<%--侧边栏 end--%>
<rapid:block name="footer-script">
    <script src="/js/back.js"></script>
    <script>
        function like(postId) {
            $.ajax({
                async: false,
                type: "POST",
                url:'/post/like/${postId}',  //后面一个id为函数传入的id
                contentType : "application/x-www-form-urlencoded; charset=utf-8",
                dataType: "text",
                complete:function () {
                    window.location.reload();
                }
            })
        }
        function replyComment(floorNum, commentId) {
            document.getElementsByName("commentPid")[0].value=commentId;
            document.getElementsByName("commentFloor")[0].value="回复 "+floorNum+"楼: ";
            document.getElementById("reply-comment").style.display="";
        }
        function unReply() {
            document.getElementsByName("commentPid")[0].value="";
            document.getElementsByName("commentFloor")[0].value="";
            document.getElementById("reply-comment").style.display="none";
        }
    </script>
</rapid:block>
<%@ include file="../Public/framework.jsp" %>